<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		body {
			/*padding-top: 25px;*/
		}

		span {
			margin: 10px;
		}

		.Tabl {
			height: 20px;
			width: 88%;
			font-size: 14px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			color: #B8B8B8;
			width: 110px;
		}

		.Td2 {
			color: #000000;
			text-align: left;
		}

		.Hr {
			/*height: 1px;
				width: 96%;*/
			background-color: #DDDDDD;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		select {
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			border: none;
			background: none;
		}

		td {
			border: 1px solid transparent !important;
		}
	</style>
</head>

<body>

	<div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
			style="margin-top: 150px">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<table class="table table-striped" style="border: 0">
							<tbody id="tz" style="border: 0">
								<tr style="border: 0">
									<td>序号</td>
									<td>名称</td>
									<td>科属</td>
									<td>操作</td>
								</tr>
								<tr v-for="(lis,index) in list" style="border: 0">
									<td v-text="index+1"></td>
									<td v-text="lis.name"></td>
									<td v-text="lis.genus"></td>
									<td><button data-dismiss="modal" @click="details(lis)">选择</button></td>
								</tr>
							</tbody>
						</table>
						<!--
							<table>
							<tr v-for="(lis,index) in list">
							<td v-text="lis.name"></td>
							<td><button onclick="dianji()">选择</button></td>
							</tr>
							</table>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="id" name="id" />
	<input type="hidden" id="aid" name="aid" />
	<button style="background-color: #F2F2F2;height: 47px;width: 100%;font-size: 18px;">基本信息</button>
	<table class="Tabl" style="margin-top: 20px">
		<tr>
			<td class="Td1">所属标段</td>
			<td class="Td2">
				<input type="text" readonly="readonly" id="areaname" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">类型</td>
			<td class="Td2">
				<input type="text" id="type" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">树种</td>
			<td class="Td2">
				<input type="text" readonly="readonly" data-toggle="modal" data-target="#myModal" id="treespeciesname"
					value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">监测点位置</td>
			<td class="Td2">
				<input type="text" id="locationpoints" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">诱捕器</td>
			<td class="Td2">
				<input type="text" id="trap" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">黑光灯</td>
			<td class="Td2">
				<input type="text" id="blacklight" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">负责人</td>
			<td class="Td2">
				<input type="text" id="people" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">电话</td>
			<td class="Td2">
				<input type="text" id="phone" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">负责单位</td>
			<td class="Td2">
				<input type="text" id="responsibleunit" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">详细地址</td>
			<td class="Td2">
				<input type="text" id="address" value="" />
			</td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">地图坐标</td>
			<td class="Td2">
				<input type="text" id="mapcoordinates" value="" />
			</td>
		</tr>
	</table>
	<button style="background-color: #F2F2F2;height: 47px;width: 100%;font-size: 18px;margin-top: 20px">图片信息</button>

	<div style="padding: 10px;">
		<ul class="upload-ul clearfix">
			<li class="upload-pick">
				<div id="xcimage"><img id="immmg" src="" style="width: 100px;height: 100px">
				</div>
				<div class="webuploader-container clearfix" id="goodsUpload" onclick="img()"></div>
			</li>
		</ul>
	</div>
	<hr class="Hr" />
	<table class="TabL">
		<tr>
			<td> <textarea rows="4" cols="35" id="note" placeholder="备注"></textarea></td>
		</tr>
	</table>
	<div class="modal-footer">
		<button class="btn btn-primary" style="width: 100%" onclick="sub()">
			保存更改
		</button>
	</div>
</body>
<script src="../../script/webuploader.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.0.min.js"></script>
<script src="../../script/diyUpload1.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">
	var projectid = null;
	var reg = $api.getStorage("userSession");
	var sids = reg.data.sysRole.sysRoleCode;
	var role = sids.role_number;
	if (role != "construction") {
		projectid = $api.getStorage("selectpor").id;
	} else {
		projectid = reg.data.areaid;
	}
	var user = $api.getStorage('userSession');
	////企业id
	function sub() {
		var formData = new FormData();
		formData.append("id", $("#id").val());
		formData.append("aid", projectid);
		formData.append("areaname", $("#areaname").val());
		formData.append("type", $("#type").val());
		formData.append("treespeciesname", $("#treespeciesname").val());
		formData.append("locationpoints", $("#locationpoints").val());
		formData.append("trap", $("#trap").val());
		formData.append("blacklight", $("#blacklight").val());
		formData.append("people", $("#people").val());
		formData.append("phone", $("#phone").val());
		formData.append("responsibleunit", $("#responsibleunit").val());
		formData.append("mapcoordinates", $("mapcoordinates").val());
		formData.append("address", $("#address").val());
		formData.append("note", $("#note").val());
		formData.append("photo", image);
		//formData.append("file", $("input[name='photo']")[0].files[0]);
		$.ajax({
			url: BaseServiceUrl + "mobile/insect/update.json",
			type: 'POST',
			data: formData,
			async: false,
			cache: false,
			contentType: false,
			processData: false,
			success: function (data) {
				if (data.code == 0) {
					alert("添加成功");
					window.location.reload();
				}
			}
		});
	}

	var map;
	var UIMediaScanner;
	var image;
	var slidingList;
	apiready = function () {
		$("#xcimage").hide();
		var reg = $api.getStorage("userSession");
		var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		if (role != "construction") {
			projectid = $api.getStorage("selectpor").id;
			$("#areaname").val($api.getStorage('selectpor').projectName);
			$("#aid").val(projectid);
		} else {
			projectid = reg.data.areaid;
			$("#aid").val(projectid);
		}


		//			map = api.require('bMap');
		//			map.open({
		//				rect : {
		//					x : 0,
		//					y : 0,
		//					w : 'auto',
		//					h : 250
		//				},
		//				center : {
		//					lon : 116.4021310000,
		//					lat : 39.9994480000
		//				},
		//				zoomLevel : 10,
		//				showUserLocation : true,
		//				fixedOn : api.frameName,
		//				fixed : true
		//			}, function(ret) {
		//				if (ret.status) {
		//				}
		//			});
		var map = api.require('bMap');
		map.addEventListener({
			name: 'click'
		}, function (ret) {
			if (ret.status) {
				$("#mapcoordinates").val(ret.lon + ", " + ret.lat);
				//alert(JSON.stringify(ret));
			}
		});
		//单图片上传方法
		UIMediaScanner = api.require('UIMediaScanner');
		slidingList = api.require('slidingList');
		var apps = new Vue({
			el: '#myModal',
			data: {
				list: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/insect/list.json",
					data: {
						id: user.data.id
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						if (result.code == 0) {
							for (var i = 0; i < result.obj.length; i++) {
								apps.list.push(result.obj[i]);
							}
						}
					}
				});
			},
			methods: {
				details: function (_this) {

					$("#treespeciesname").val(_this.name);
				}
			}
		});
	};

	function sz() {
		slidingList.showList({
			rightbtn: '确定',
			leftbtn: '取消',
			item_height: '130',
			item_num: '3',
			data: [{
				content: "<input>"
			}, {
				content: '标题2'
			}, {
				content: '标题3'
			}]
		}, function (ret, err) {
			if (ret) {
				alert(JSON.stringify(ret));
			} else {
				alert(JSON.stringify(err));
			}
		});
	}

	//选择正常或者异常
	flag = "btn1";

	function btn1() {
		document.getElementById("btn2").style.color = "#FFFFFF";
		document.getElementById("btn1").style.color = "#FFFFFF";
	}

	function btn2() {
		document.getElementById("btn1").style.color = "#FFFFFF";
		document.getElementById("btn2").style.color = "#FFFFFF";
	}

	function btn(num) {
		if (num == 1) {
			document.getElementById(flag).style.color = "#FFFFFF";
			document.getElementById(flag).style.backgroundColor = "#FFFFFF";
			document.getElementById("btn1").style.color = "#FFFFFF";
			document.getElementById("btn1").style.backgroundColor = "#FF8C00";
			flag = "btn1";
		}
		if (num == 2) {
			document.getElementById(flag).style.color = "#FFFFFF";
			document.getElementById(flag).style.backgroundColor = "#FFFFFF";
			document.getElementById("btn2").style.color = "#FFFFFF";
			document.getElementById("btn2").style.backgroundColor = "#FF8C00";
			flag = "btn2";
		}
	}

	function dianji() {
		api.ajax({
			url: ''
		}, function (ret, err) {
			//coding...
		});
	}

	function img() {
		UIMediaScanner.open({
			type: 'picture',
			column: 4,
			classify: true,
			max: 4,
			sort: {
				key: 'time',
				order: 'desc'
			},
			texts: {
				stateText: '已选择*项',
				cancelText: '取消',
				finishText: '完成'
			},
			styles: {
				bg: '#fff',
				mark: {
					icon: '',
					position: 'bottom_left',
					size: 20
				},
				nav: {
					bg: '#eee',
					stateColor: '#000',
					stateSize: 18,
					cancelBg: 'rgba(0,0,0,0)',
					cancelColor: '#000',
					cancelSize: 18,
					finishBg: 'rgba(0,0,0,0)',
					finishColor: '#000',
					finishSize: 18
				}
			},
			scrollToBottom: {
				intervalTime: 3,
				anim: true
			},
			exchange: true,
			rotation: true
		}, function (ret) {
			if (ret) {
				image = ret.list[0].path;
				$('#immmg').attr('src', image);
				//图片链接（base64）
				$("#xcimage").show();
			}
		});
	}
</script>

</html>